<template>
    <div class="goods-square">
        <!-- 标题和更多链接 -->
        <div class="section-header">
            <h2 class="section-title">
                <el-icon>
                    <Goods />
                </el-icon>闲置广场
            </h2>
            <router-link to="/goods" class="section-more">
                查看更多<el-icon>
                    <ArrowRight />
                </el-icon>
            </router-link>
        </div>

        <!-- 商品卡片网格 -->
        <div class="goods-grid">
            <el-card v-for="goods in goodsList" :key="goods.id" class="goods-card" shadow="hover"
                @click="navigateToDetail(goods.id)">
                <div class="goods-header">
                    <el-tag :type="getStatusType(goods.status)" size="small">
                        {{ goods.status }}
                    </el-tag>
                    <span class="goods-type">{{ goods.type }}</span>
                </div>

                <div class="goods-image-container">
                    <el-image :src="goods.imgUrl" fit="cover" class="goods-image">
                        <template #error>
                            <div class="image-error">
                                <el-icon>
                                    <Picture />
                                </el-icon>
                            </div>
                        </template>
                    </el-image>
                </div>

                <h3 class="goods-title">{{ goods.name }}</h3>
                <p class="goods-desc">{{ goods.description }}</p>

                <div class="goods-footer">
                    <div class="goods-meta">
                        <span class="goods-price">
                            <el-icon>
                                <Coin />
                            </el-icon>
                            ¥{{ goods.price }}
                        </span>
                        <span class="goods-views">
                            <el-icon>
                                <View />
                            </el-icon>
                            {{ goods.viewCount }}
                        </span>
                    </div>
                    <el-button type="primary" size="small" @click.stop="handleContact(goods)">
                        联系卖家
                    </el-button>
                </div>
            </el-card>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import {
    Goods, ArrowRight, Picture, Coin, View
} from '@element-plus/icons-vue'
import type { IGoods } from '../types/goods'

const router = useRouter()

// 商品数据
const goodsList = ref(<IGoods[]>[
    {
        id: 1,
        type: "书籍",
        name: '《高等数学(第七版)》上下册',
        price: 100,
        description: '九成新无笔记',
        remainCount: 10,
        viewCount: 1024,
        imgUrl: 'https://agoni-web.oss-cn-beijing.aliyuncs.com/70b8c951-bcac-4cd1-a1d6-3cf1ff840f74.jpg',
        status: "待交易",
        tradeType: "线上",
        createdBy: "student_456",
        createTime: "2023-05-19 18:30:00",
    },
    {
        id: 2,
        type: "电子产品",
        name: 'Apple iPad Air 5',
        price: 3999,
        description: '2023年购买，保修期还剩8个月，配件齐全',
        remainCount: 1,
        viewCount: 856,
        imgUrl: 'https://p3.hippopx.com/preview/971/922/brown-wooden-chairs-round-table-elegant-cafe-classic-wooden-chairs-warm-atmosphere-cafe-setting-wooden-furniture-indoor-cafe-cozy-cafe-cafe-decor.jpg',
        status: "交易中",
        tradeType: "线下",
        createdBy: "tech_lover",
        createTime: "2023-06-10 14:20:00",
    },
    {
        id: 3,
        type: "生活用品",
        name: '美的电饭煲 4L',
        price: 199,
        description: '全新未拆封，京东618抢购多余商品',
        remainCount: 3,
        viewCount: 432,
        imgUrl: 'https://p3.hippopx.com/preview/157/684/african-american-girl-walking-brazilian-flag-mural-sunny-outdoor-street-wall-mural-brazilian-flag-street-girl-outdoor.jpg',
        status: "待交易",
        tradeType: "线上/线下",
        createdBy: "home_maker",
        createTime: "2023-06-15 09:45:00",
    },
    {
        id: 4,
        type: "服饰",
        name: 'Nike Air Force 1 运动鞋',
        price: 599,
        description: '白色42码，仅试穿一次，几乎全新',
        remainCount: 1,
        viewCount: 723,
        imgUrl: 'https://p3.hippopx.com/preview/841/566/female-model-studio-shot-trench-coat-confident-pose-stylish-woman-studio-setting-sitting-on-chair-fashion-photography-modern-style-high-boots.jpg',
        status: "已售出",
        tradeType: "线下",
        createdBy: "sneaker_head",
        createTime: "2023-05-28 11:30:00",
    },
    {
        id: 5,
        type: "学习用品",
        name: '考研数学复习全书',
        price: 65,
        description: '2023最新版，有少量铅笔笔记可擦除',
        remainCount: 2,
        viewCount: 298,
        imgUrl: 'https://p3.hippopx.com/preview/712/668/vicuna-animal-wildlife-mammal-fauna-wilderness-nature-cajamarca-peru.jpg',
        status: "待交易",
        tradeType: "线上",
        createdBy: "grad_student",
        createTime: "2023-06-05 16:10:00",
    },
    {
        id: 6,
        type: "电子产品",
        name: 'AirPods Pro 2代',
        price: 1299,
        description: '国行正品，发票齐全，使用3个月',
        remainCount: 1,
        viewCount: 1567,
        imgUrl: 'https://p3.hippopx.com/preview/98/537/microphone-condenser-microphone-recording-studio-close-up-photo-detailed-view-studio-equipment-audio-recording-professional-microphone-studio-microphone-sound-recording.jpg',
        status: "交易中",
        tradeType: "线下",
        createdBy: "audio_enthusiast",
        createTime: "2023-06-12 20:15:00",
    }
])

const getStatusType = (status: string) => {
    switch (status) {
        case '待交易': return 'warning'
        case '交易中': return 'success'
        case '已售出': return 'info'
        default: return ''
    }
}

//校园活动数据
const activityList = ref([
    {
        id: 1,
        title: '校园一日游',
        imgUrl: 'https://agoni-web.oss-cn-beijing.aliyuncs.com/activity1.jpg',
        startTime: '2023-06-10 19:00:00',
        endTime: '2023-06-10 22:00:00',
        address: '北京市海淀区西二旗北路10号',
        status: '进行中',
        //活动预计人数
        expectedPeople: 1000,
        //活动已报名人数
        signedPeople: 500,
        desc: '活动描述1',
        text: '活动详情1用那种编译器可以编辑文章的',
        createdBy: 'admin',
        //联系方式
        contact: '13812345678',
        //活动类型
        type: '线上活动/线下沙龙',
        //活动标签
        tags: ['交友', '学习', '生活'],
        createTime: '2023-06-10 10:00:00',
    },

])


const navigateToDetail = (id: number) => {
    router.push(`/goods/detail/${id}`)
}

const handleContact = (goods: IGoods) => {
    // 联系卖家逻辑
    console.log('联系卖家:', goods.createdBy)
    // 实际项目中可以跳转到聊天页面或显示联系方式
}
</script>





<style scoped>
.goods-square {
    margin: 40px 0;
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.section-title {
    margin: 0;
    font-size: 20px;
    color: #333;
    display: flex;
    align-items: center;
}

.section-title .el-icon {
    margin-right: 8px;
    font-size: 24px;
}

.section-more {
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #666;
    text-decoration: none;
    transition: all 0.3s;
}

.section-more:hover {
    color: var(--el-color-primary);
}

.section-more .el-icon {
    margin-left: 5px;
}

.goods-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}

.goods-card {
    cursor: pointer;
    transition: all 0.3s;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.goods-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.goods-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.goods-type {
    font-size: 12px;
    color: #666;
}

.goods-image-container {
    height: 160px;
    margin-bottom: 12px;
    border-radius: 4px;
    overflow: hidden;
}

.goods-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}

.goods-card:hover .goods-image {
    transform: scale(1.05);
}

.image-error {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f5f5f5;
    color: #999;
}

.goods-title {
    margin: 0 0 8px;
    font-size: 16px;
    color: #333;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.goods-desc {
    margin: 0 0 12px;
    font-size: 14px;
    color: #666;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex-grow: 1;
}

.goods-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
}

.goods-meta {
    font-size: 14px;
    color: #666;
    display: flex;
    gap: 12px;
}

.goods-meta .el-icon {
    margin-right: 4px;
    font-size: 14px;
}

.goods-price {
    color: #f56c6c;
    font-weight: bold;
}
</style>